<script setup>
import { ref, computed } from 'vue'

const visible = ref(false)
const type = ref('success')
const message = ref('')

const modalType = computed(() => ({
    'success': type.value === 'success',
    'error': type.value === 'error'
}))

let timer = null

const show = (response) => {
    type.value = response.code === 1 ? 'success' : 'error'
    message.value = response.msg || response.data

    // 每次显示前清除旧定时器
    if (timer) clearTimeout(timer)

    visible.value = true
    timer = setTimeout(() => {
        visible.value = false
    }, 3000)
}

defineExpose({ show })

</script>
<template>
    <Teleport to="body">
        <div v-if="visible" class="modal-container" :class="modalType">
            <div class="modal-icon">
                <!-- 图标保持不变 -->
            </div>
            <div class="modal-content">
                <div class="modal-message">{{ message }}</div>
            </div>
        </div>
    </Teleport>
</template>

<style scoped>
.modal-container {
    position: fixed;
    z-index: 9999;
    /* 居中定位 */
    top: 60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    animation: scaleIn 0.3s ease;
    pointer-events: none;
}

/* 新动画效果 */
@keyframes scaleIn {
    from {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* 其他样式保持不变 */
/* 内部可点击区域 */
.modal-close {
    pointer-events: all;
}

.modal-container.success {
    border-left: 4px solid #4CAF50;
}

.modal-container.error {
    border-left: 4px solid #f44336;
}
</style>